import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { reloadTab } from '@/utils/utils';
import { notification } from 'antd';
import { Button, Modal, Space, Form, Row, Col } from 'antd';
import { workType_status_selece } from '@/common/contact';
import FormCondition from '@/components/FormCondition';
import aliOssUpload from '@/utils/aliOssUpload';
import { useUpdateEffect } from 'ahooks';
const AuthFormSetting = (props) => {
  const {
    visible = false,
    onClose,
    loading,
    organizationAuthAdminList,
    dispatch,
    handleCallback
  } = props;
  const { show = false, detail = {}, } = visible;
  const { id, stage } = detail
  const [form] = Form.useForm();

  const [stageList, setStageList] = useState([])
  const childRef = useRef();
  useEffect(() => {
    if (show) {
      dispatch({
        type: 'user/fetchUserStageForChoose',
        payload: {
          organizationUserId: id,
          queryFor: 'apply',
        },
        callback: (e) => {
          const { stageInfoList = [] } = e
          setStageList(stageInfoList.map(val => {
            const {
              stageInfo = {},
              subStageInfoList = []
            } = val
            const { chooseFlag } = stageInfo
            if (subStageInfoList.length > 0) {
              return {
                ...stageInfo,
                ...val,
                subStageInfoList: subStageInfoList.map(o => {
                  return {
                    ...o,
                    disabled: o.chooseFlag === '1' ? false : true
                  }
                })
              }
            }
            return {
              ...stageInfo,
              disabled: chooseFlag === '1' ? true : false
            }
          }))
        }
      })

    }
    else {
      setStageList([])
    }
  }, [show])
  useEffect(() => {
    if (stageList.length > 0) {
      const filterBaseList = stageList.reduce((item, val) => {
        const {
          subStageInfoList = [],
          stageInfo = {}
        } = val
        const { stageIdentification } = stageInfo
        return [
          ...item,
          {
            ...val,
            stageInfo: {
              ...stageInfo,
              baseStageFlag: '1',
              mainStage: '',
            }
          },
          ...subStageInfoList.map(c => {
            return {
              stageInfo: {
                ...c,
                mainStage: stageIdentification
              }
            }
          }),
        ]
      }, [])
      const initStage = filterBaseList.reduce((item, val) => {
        if (val.stageInfo.stageIdentification === stage) {
          return val
        }
        return item
      }, {})
      console.log(initStage, 'initStage-------------')
      const {
        stageInfo
      } = initStage
      const { userStageId } = stageInfo
      form.setFieldsValue({
        stageId: userStageId
      })
    }
  }, [stageList])
  const formItems = [
    {
      label: '关联类型',
      name: 'workType',
      select: workType_status_selece,
      type: 'radio'
    },
    {
      label: `阶段`,
      name: 'stageId',
      disabled: true,
      type: 'stage',
      loading: loading,
      select: stageList,
      fieldNames: { label: 'stageName', value: 'userStageId', options: 'subStageInfoList' },
    },
    {
      label: '申请说明',
      name: 'applyContent',
      type: 'textArea',
      rules: [{ required: false }],
    },
    {
      label: '图片',
      name: 'applyImages',
      type: 'upload',
      rules: [{ required: false }],
    },
    // {
    //   label: '附件',
    //   name: 'applyAttachments',
    //   type: 'otherUpload'
    // },
  ];
  const handleUpAudit = () => {

    form.validateFields().then(async (values) => {
      const { applyImages, applyAttachments } = values
      const img = await aliOssUpload(applyImages)
      // const file = await aliOssUpload(applyAttachments)
      dispatch({
        type: 'user/fakeUserStageAdminApply',
        payload: {
          ...values,
          organizationUserId: id,
          applyImages: img.toString(),
          // applyAttachments: file.toString()
        },
        callback: (e) => {
          onClose()
          handleCallback && handleCallback()
        }
      })
    });

  };

  const modalProps = {
    title: `发起申请`,
    width: 900,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
    footer: <Space>
      <Button onClick={() => onClose()}>取消</Button>
      <Button type='primary' onClick={() => handleUpAudit()}>确定</Button>
    </Space>
  };

  return (
    <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
      <FormCondition initialValues={detail} form={form} formItems={formItems}></FormCondition>
    </Modal>
  );
};

export default connect(({ weCom, loading }) => ({
  ...weCom,
  loading: loading.models.weCom || loading.models.subscriber,
}))(AuthFormSetting);
